<template>
  <div class="user-list">
    <h3>歌曲交互数据列表</h3>
    <el-select v-model="value" placeholder="默认排序" style="width: 150px; margin-left: 1216px;">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-table :data="tableData" style="width: 100%; margin-top: 15px;">
      <el-table-column prop="index" label="序号" width="100" />
      <el-table-column label="歌曲名称" prop="song_name" />
      <el-table-column label="歌手名称" prop="artist_name" />
      <el-table-column label="播放次数" prop="play_count" />
      <el-table-column label="收藏次数" prop="favorite_count" />
      <el-table-column label="分享次数" prop="share_count" />
    </el-table>

    <!-- 分页器 -->
    <div class="page">
      <el-pagination
        :page-size="pageSize"
        :pager-count="pageSize"
        layout="prev, pager, next"
        :total="totalNum"
        @current-change="changePageFn"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import http from '../../api/http';

const value = ref('默认排序');

const options = [
  { value: '默认排序', label: '默认排序' },
  { value: '播放次数', label: '播放次数' },
  { value: '收藏次数', label: '收藏次数' },
  { value: '分享次数', label: '分享次数' },
];

// 歌曲列表数据
const tableData = ref<any>([]);

// 歌曲总数
let totalNum = ref(0);
let page = ref(1);
let pageSize = ref(11);

// 默认排序
const songListFn = async (page = 1, pageSize = 10) => {
  await http.getSongList({ page, pageSize }).then(
    content => {
      let { code, total, result } = content;
      if (code == 200) {
        let newArr = result.map((item: any, i: number) => {
          item.index = i + 1;
          return item;
        });
        tableData.value = newArr;
        totalNum.value = total;
      } else {
        console.log('获取歌曲交互数据列表失败');
      }
    }
  );
};

// 按播放次数排序
const getplayCountFn = async (page = 1, pageSize = 10) => {
  await http.getplayCount({ page, pageSize }).then(
    content => {
      let { code, total, result } = content;
      if (code == 200) {
        let newArr = result.map((item: any, i: number) => {
          item.index = i + 1;
          return item;
        });
        tableData.value = newArr;
        totalNum.value = total;
      } else {
        console.log('按播放次数获取歌曲交互数据列表失败');
      }
    }
  );
};

// 按收藏次数排序
const getcollectCountFn = async (page = 1, pageSize = 10) => {
  await http.getcollectCount({ page, pageSize }).then(
    content => {
      let { code, total, result } = content;
      if (code == 200) {
        let newArr = result.map((item: any, i: number) => {
          item.index = i + 1;
          return item;
        });
        tableData.value = newArr;
        totalNum.value = total;
      } else {
        console.log('按收藏次数获取歌曲交互数据列表失败');
      }
    }
  );
};

// 按分享次数排序
const getshareCountFn = async (page = 1, pageSize = 10) => {
  await http.getshareCount({ page, pageSize }).then(
    content => {
      let { code, total, result } = content;
      if (code == 200) {
        let newArr = result.map((item: any, i: number) => {
          item.index = i + 1;
          return item;
        });
        tableData.value = newArr;
        totalNum.value = total;
      } else {
        console.log('按分享次数获取歌曲交互数据列表失败');
      }
    }
  );
};

// 监听 value 的变化
watch(value, (newValue) => {
  switch (newValue) {
    case '默认排序':
      songListFn(page.value, pageSize.value);
      break;
    case '播放次数':
      getplayCountFn(page.value, pageSize.value);
      break;
    case '收藏次数':
      getcollectCountFn(page.value, pageSize.value);
      break;
    case '分享次数':
      getshareCountFn(page.value, pageSize.value);
      break;
    default:
      songListFn(page.value, pageSize.value);
  }
});

// 点击分页时执行的函数
const changePageFn = (num: number) => {
  page.value = num;
  switch (value.value) {
    case '默认排序':
      songListFn(page.value, pageSize.value);
      break;
    case '播放次数':
      getplayCountFn(page.value, pageSize.value);
      break;
    case '收藏次数':
      getcollectCountFn(page.value, pageSize.value);
      break;
    case '分享次数':
      getshareCountFn(page.value, pageSize.value);
      break;
    default:
      songListFn(page.value, pageSize.value);
  }
};

// 初始化歌曲交互数据列表
songListFn(page.value, pageSize.value);
</script>

<style lang="scss">
.user-list {
  h3 {
    margin-bottom: 15px;
  }
}

.page {
  margin-top: 15px;
  background-color: #fff;
  padding: 10px 10px;
}
</style>